
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>抛物线</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    var ball={x:512,y:100,r:20,g:2,vx:-4,vy:-10,color:'#058'};
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        canvas.width=512;
        canvas.height=374;
        setInterval(
                function(){
                    render(context);
                    update();
                },50
        );

    }
    function update(){
       ball.x+=ball.vx;
       ball.y+=ball.vy;
       ball.vy+=ball.g;
        if( ball.y>=374-ball.r ){
            ball.y=374-ball.r;
            ball.vy=- ball.vy*0.5;
        }

        if( ball.x<=ball.r ){
            ball.x=ball.r;
            ball.vx=- ball.vx;
        }
        if( ball.y<=ball.r ){
            ball.y=ball.r;
            ball.vy=- ball.vy;
        }
        if( ball.x>=512-ball.r ){
            ball.x=512-ball.r;
            ball.vx=- ball.vx;
        }
    }
    function render(cxt){
        cxt.clearRect(0,0, cxt.canvas.width,cxt.canvas.height);
        cxt.fillStyle=ball.color;
        cxt.beginPath();
        cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
        cxt.closePath();
        cxt.fill();

    }
</script>
</body>
</html>